<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello react</title>
  <style>
    .jsthin-react {
      width: 200px;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div id="app"></div>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- 生产环境中不建议使用 -->
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  <script type="text/babel">
    const message = 'hello react jsx'
    const id = 'jsthin'
    const content = 'jsthin is study react'
    // 创建虚拟DOM
    const VDOM = (
      <div>
        <div className="jsthin-react" id={ id }>
          <span style={{ color: '#fff', fontSize: '20px' }}>{ message }</span>
        </div>
        <div>{ content }</div>
        <input type="text" />
      </div>
    )
    // 渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('app'))

    /* 
      1. 定义虚拟DOM时，不需要写引号
      2. 标签中混入js表达式时, 需要使用{}
      3. 样式的类名指定使用className,不要使用class
      4. 内联样式，使用style={{key:value}}写法
      5. 只能有一个根标签
      6. 标签必须闭合 <div></div> 或 <input />
      7. 标签首字母：
        a. 若小写字母开头，则将该标签转化为对应的html同名标签，若HTML中没有同名的标签，就会报错
        b. 若大写字母开头，react回去渲染对应的组件，如果找不到该组件，就会报错
    */
  </script>
</body>
</html>